import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { lazy, type JSX } from 'react'
import { createBrowserRouter } from 'react-router-dom'

const App = lazy(() => import('../App'))
const Home = lazy(() => import('../pages/Home/index'))
const Detail = lazy(() => import('../pages/Detail/index'))
const My = lazy(() => import('../pages/My/index'))
const Login = lazy(() => import('../pages/Login/index'))
const Error = lazy(() => import('../pages/Error/index'))
const Props = lazy(() => import('../pages/Props/index'))
const Han = lazy(() => import('../pages/Props/Han/index'))
const List = lazy(() => import('../pages/List/index'))
const Dog = lazy(()=>import('../pages/Dog/index'))
const Huan = lazy(()=>import('../pages/Huan/index'))

type homerouters = {
    path: string
    element: JSX.Element
    children?: homerouters
    icon?: any
    label?: string
}[]
const Allrouter: any = {
    home: {
        path: '/home',
        element: <Home></Home>,
        icon: <MenuFoldOutlined></MenuFoldOutlined>,
        label: '首页'
    },
    detail: {
        path: '/detail',
        element: <Detail></Detail>,
        icon: <UploadOutlined></UploadOutlined>,
        label: '详情'
    },
    list: {
        path: '/list',
        element: <List></List>,
        icon: <MenuUnfoldOutlined></MenuUnfoldOutlined>,
        label: '列表管理'
    },
    dog: {
        path: '/dog',
        element: <Dog></Dog>,
        icon: <MenuUnfoldOutlined></MenuUnfoldOutlined>,
        label: '有道翻译'
    },
    my: {
        path: '/my',
        element: <My></My>,
        icon: <UserOutlined></UserOutlined>,
        label: '个人中心'
    },
    huan: {
        path: '/huan',
        element: <Huan></Huan>,
        icon: <UserOutlined></UserOutlined>,
        label: '换肤'
    },
    props: {
        path: '/props',
        element: <Props></Props>,
        icon: <VideoCameraOutlined></VideoCameraOutlined>,
        label: '分类',
        children: [
            {
                path: '/props/han',
                element: <Han></Han>,
                icon: <MenuUnfoldOutlined></MenuUnfoldOutlined>,
                label: '菜单管理'
            }
        ]
    },
}
export const tabbar: homerouters = []
const role = {
    admin: {
        Myrouter: ['home', 'detail', 'my', 'list', 'props','dog','huan']
    },
    user: {
        Myrouter: ['home', 'detail', 'my']
    }
}
const { Myrouter } = role[localStorage.getItem('role') == '1' ? 'admin' : 'user']
Myrouter.forEach((item) => {
    tabbar.push(Allrouter[item])
})
const routes: homerouters = [
    {
        path: '/',
        element: <App></App>,
        children: tabbar
    },
    {
        path: '/login',
        element: <Login></Login>,
    },
    {
        path: '*',
        element: <Error></Error>,
    },
]
const router = createBrowserRouter(routes)
export default router